<!DOCTYPE html>
<html style="height: 100%;" >
	<head>
		<meta charset="utf-8">
		<title>找回密码页面</title>
		<!--样式标签-->
		<style>
		.body_class{
			height: 100%;
			background-image: url(img/玩具小屋.jpg);
			background-size:100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		.main_div{
			width: 400px;
			height: 250px;
			background-color: bisque;
			border-radius: 10px;
			box-shadow: 10px 10px 10px #888888;
			display:flex;
			flex-direction: column;
			align-items: center;
			
		}
		.title_span{
			margin-top: 30px;
			font-size: 25px;
			font-family: "楷体";
			text-shadow: 5px 5px 5px black;
		}
		.item_div{
			margin-top: 15px;
		}
		.div_bottom{
			margin-top: 30px;
			width:100%;
			height:100%;
			display: flex;
			flex-direction: row;
		}
		</style>
		<!--js-->
		<script src="./js/jquery.js"></script>
		<script>
		/**
		 * 找回密码
		 */
		function findPassword(btn){
			var username=document.getElementById("username").value;
			
			if(username==null||username.trim()==""){
				//用户名为空
				alert("用户名不能为空！");
				return;
			}
			//禁用按钮-表示邮件已经发送
			btnDisTime(btn);
			
			//通过Ajax 请求后端发送短信
			$.ajax({
				type:"POST",
				url:"http://localhost:8080/user/sendEmailCode",
				data:{
					username:username
				},
				success:function(data){
					if(data==1){
						//alert("邮件发送成功");
					}else if(data==-1){
						alert("账号不存在!");
						//按钮恢复
						$(btn).removeAttr("disabled");
						$(btn).html("发送邮件");
						//关闭定时器
						clearTimeout(mytimeout);
					}else if(data==-2){
						//alert("邮件发送失败！");
					}
				},
				error(){
					alert("000")
				}
			});
		}
		/**
		 * 按钮禁用的倒计时
		 */
		var time=60;
		var mytimeout=null;
		function btnDisTime(btn){
		  $(btn).attr("disabled","disabled");
		  //改变按钮的内容
		  $(btn).html("邮件已发送...("+time+")");
		  //开启定时器
		  mytimeout=setTimeout(function(){
			  //时间扣减
			  time--;
			  if(time>0){
				  btnDisTime(btn);
			  }else{
				  //结束递归
				  //按钮回复
				  $(btn).removeAttr("disabled");
				  $(btn).html("发送邮件");
				  time=60;
			  }
		  },1000);
		}
		/**
		 * 重置密码请求
		 */
		function updatePassword(){
			
			var username = $("#username").val();
			var newpassword = $("#newpassword").val();
			var code = $("#code").val();
			
			//参数校验
			$.ajax({
				type: "POST",
				url: "http://localhost:8080/user/updatePassword",
				data: {
					username: username,
					newpassword: newpassword,
					code: code
				},
				success: function(data){
					if(data == 1){
						alert("密码重置成功");
						//跳回登录页面
						location.href="index.html";
					} else if(data == -1){
						alert("无效或已过期的验证码");
					} else if(data == -2){
						alert("验证码错误");
					}
				}
			});
		}
		</script>
	</head>
<!--网页体-->
	<body class="body_class">
		<!--登录注册的背景框-->
		<div class="main_div">
			<span class="title_span">找回密码</span>
			
			<div class="item_div">
				账号:<input id="username"  placeholder="请输入用户名"/>
				<button onclick="findPassword(this)">发送邮件</button>	
			</div>
			<div class="item_div">
				重置密码:<input id="newpassword" placeholder="请输入新密码" />
			</div>
			<div class="item_div">
				验证码:<input id="code" placeholder="验证码" style="width:50px" />
			</div>
			<div class="div_bottom">
				<button onclick="updatePassword()" style="width:100%;height:100%;">重置密码</button>
			</div>
		</div>
	</body>
</html>
